<template>
  <div class="sc_tabs_root">
      <ul class="tab_box">
          <li class="tab" v-for="(item,index) in tabs" :key="index">
                <svg-icon 
                 v-if="showIcon"
                 :icon-class="item.icon" 
                 class="icon" 
                 @click="handleClick(item,index)"
                >
                </svg-icon>
                <span 
                 class="tab_label" 
                 :class="{active:isActive(item[value])}"
                 @click="handleClick(item,index)"
                >
                    {{item[label]}}
                </span>
                <span class="dividing_line">|</span>
          </li>
      </ul>
      <div class="tab_content">
          <slot :name="getSlotName"></slot>
      </div>
  </div>
</template>

<script>

export default {
    name:'ScTabs',
    model: {
        prop: 'activeLabel', // 默认是value
        event: 'change', // 默认是input
    },
    props:{
        tabs:{
            type:Array,
            default:()=>[]
        },
        label:{
            type:String,
            default:'label'
        },
        value:{
            type:String,
            default:'value'
        },
        showIcon:{
            type:Boolean,
            default:false
        },
        activeLabel:{
            type:String,
            required:true
        }
    },
    data(){
        return {
            currentIndex:0,
        }
    },
    computed:{
        getSlotName(){
            return this.activeLabel
        }
    },
    methods:{
        isActive(value){
            return this.activeLabel === value
        },
        handleClick(item,index){
            if(this.activeLabel === item[this.value]) return
            this.$emit('change', item[this.value])
            this.$emit('tab-click', item, index)
        },
    },
}
</script>

<style scoped lang="scss">
.sc_tabs_root{
    .tab_box{
        display: flex;
    }
    .tab_content{
        padding: 20px 0;
    }
    
}
.tab_box .tab{
    display: flex;
    align-items: center;
    // background: pink;
    .icon{
        font-size: 22px;
        margin-right: 3px;
        &:hover{
            cursor: pointer;
        }
    }
    .tab_label{
        font-size: 14px;
        color: #B2B5C7;
        &:hover{
            cursor: pointer;
        }
    }
    .active{
        color: #00A298;
    }
    .dividing_line{
        font-size: 12px;
        margin: 0 10px;
        color: #B2B5C7;
    }
    &:last-child .dividing_line{
        display: none;
    }
}

ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

</style>